<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>商品展示</title>
    <style type="text/css">
        div, ul, li, dl, dt, dd {
            margin: 0;
            padding: 0;
        }

        ul, li, dl, dt, dd {
            list-style: none;
        }

        .demo {
            margin: 0 auto;
            width: 930px;
        }

        .demo ul li {
            float: left;
            width: 300px;
            margin-right: 6px;
            position: relative;
        }

        .demo ul li img {
            border: none;
            position: relative;
            z-index: 22;
        }

        .demo ul li a {
            width: 300px;
            display: block;
            border: 2px solid #ccc;
        }

        .demo ul li a:hover {
            border: 2px solid #C03;
        }

        .demo ul li a span {
            position: absolute;
            z-index: 33;
            bottom: 2px;
            left: 2px;
            width: 300px;
            height: 40px;
            filter: alpha(Opacity=50);
            -moz-opacity: 0.5;
            opacity: 0.5;
            background: #000;
            color: #fff;
            line-height: 40px;
            text-align: left;
            display: none;
        }

        .demo ul li a:hover span {
            display: block;
        }
    </style>
</head>
<body>
<div class="demo">
    <ul>
        <li>
            <a href="http://imooc.com">
                <img src="1.jpg"/>
                <span>学会html5 绝对的屌丝逆袭</span>
            </a>
        </li>
        <li>
            <a href="http://imooc.com">
                <img src="2.jpg"/>
                <span>圆角水晶按钮制作</span>
            </a>
        </li>
        <li>
            <a href="http://imooc.com">
                <img src="3.jpg"/>
                <span>8小时助你攻下html与css样式代码</span>
            </a>
        </li>
    </ul>
</div>
</body>
</html>
